<template>
    <div class="home">
        <el-container>
            <el-aside :style="{ width: isCollapse ? '64px' : '260px' }">
                <el-row
                    type="flex"
                    justify="space-between"
                    align="middle"
                    class="logo_box"
                >
                    <el-col :span="4" v-show="!isCollapse">
                        <img
                            src="https://p1-hera.byteimg.com/tos-cn-i-jbbdkfciu3/8a9852da76364317ab0a2c2f1c1610aa~tplv-jbbdkfciu3-webp:0:0.webp"
                            alt="logo"
                            class="logo_box_img"
                        />
                    </el-col>

                    <el-col :span="4">
                        <div @click="isCollapse = !isCollapse">
                            <i class="el-icon-s-fold" v-show="!isCollapse"></i>
                            <i class="el-icon-s-unfold" v-show="isCollapse"></i>
                        </div>
                    </el-col>
                </el-row>

                <el-menu
                    background-color="#909399"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    :collapse="isCollapse"
                    router
                    :default-active="activeMenu"
                    @select="handleMenuSelect"
                >
                    <el-menu-item index="/dashboard">
                        <i class="iconfont icondaohangshouye"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>

                    <el-menu-item index="/users">
                        <i class="iconfont iconbumenguanli"></i>
                        <span slot="title">员工与部门</span>
                    </el-menu-item>

                    <el-menu-item index="/roles">
                        <i class="iconfont iconjiaosequanxian"></i>
                        <span slot="title">角色</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header>
                    <!-- 页面标题 -->
                    <p>{{ activeMenuName }}</p>

                    <!-- 右侧下拉 -->
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            <span class="profile-title">{{
                                profile.nickname.substr(-1)
                            }}</span>
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>

                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item
                                command="editProfile"
                                icon="iconfont iconxiugaiyonghuxinxi"
                                >修改信息</el-dropdown-item
                            >

                            <el-dropdown-item
                                command="logout"
                                icon="iconfont icontuichu_huaban1"
                                >退出登录</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-header>

                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import imageUrl from "../../assets/logo.png";
export default {
    created() {
        console.log("window.location.href", window.location);
    },
    data() {
        return {
            imageUrl,
            isCollapse: false,
            profile: JSON.parse(window.sessionStorage.getItem("profile")),
            activeMenu: window.location.pathname,
            activeMenuName: "首页",
        };
    },
    methods: {
        handleMenuSelect(index) {
            this.activeMenu = index;
            if (index === "/dashboard") {
                this.activeMenuName = "首页";
            } else if (index === "/roles") {
                this.activeMenuName = "角色";
            } else if (index === "/users") {
                this.activeMenuName = "用户管理";
            }
        },
        handleCommand(command) {
            if (command === "logout") {
                window.sessionStorage.clear();
                this.$router.push("/login");
            }
        },
    },
};
</script>

<style lang="less">
.home {
    height: 100%;

    .logo_box {
        height: 60px;
        padding: 15px;
        color: #fff;
        border-bottom: 1px solid #888;

        &_img {
            width: 72px;
        }

        .el-icon-s-fold,
        .el-icon-s-unfold {
            font-size: 24px;
        }
    }

    .el-container {
        height: 100% !important;

        .el-aside {
            height: 100%;
            background-color: #909399;
            font-size: 14px;
            overflow-y: hidden;

            .el-menu {
                height: 94%;
                color: white;
                border: none;

                .iconfont {
                    color: #fff;
                }

                .el-menu-item {
                    span {
                        margin-left: 15px;
                    }
                }
            }
        }

        .el-header {
            height: 48px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #ebeef5;

            .profile-title {
                font-size: 14px;
                display: inline-block;
                padding: 5px;
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                background-color: #5f8ff7;
                color: #fff;
                border-radius: 50%;
            }
        }
    }
}
</style>
